<template>
  <div class="container mx-auto px-4 py-8 max-w-md">
    <NavBar :showLogout="false" />
    
    <div class="content-card">
      <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">登录</h2>
      <form @submit.prevent="login">
        <div class="space-y-6">
          <div>
            <label for="username" class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
            <input 
              type="text" 
              id="username" 
              v-model="username"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
              placeholder="请输入用户名"
            />
          </div>
          
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-2">密码</label>
            <input 
              type="password" 
              id="password" 
              v-model="password"
              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500"
              placeholder="请输入密码"
            />
          </div>
          
          <div class="pt-4">
            <button 
              type="submit" 
              class="w-full px-6 py-3 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors shadow-md hover:shadow-lg"
            >
              登录
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import NavBar from './NavBar.vue';

export default {
  components: { NavBar },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      if (this.username === 'admin' && this.password === 'admin') {
        this.$store.commit('setLoggedIn', true);
        localStorage.setItem('isLoggedIn', 'true');
        this.$router.push('/home');
      } else {
        this.$toast({
          message: '用户名或密码错误',
          type: 'error',
          duration: 2000
        });
      }
    }
  }
}
</script>